<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>问题</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/wangEditor.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/base.css?sads}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/nav.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/mask.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/questionDetail.css?kk}">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        $(".profile-link").attr("href", "profile/" + localStorage.userId);
        $(".profile-follow-question-link").attr("href", "profileFollowQuestion/" + localStorage.userId);
        $(".profile-question-link").attr("href", "profileQuestion/" + localStorage.userId);

        $("#profile-avatar").attr("src", localStorage.avatarUrl);
        $("#profile-username").text(localStorage.username);
    });
</script>

<base id="baseUrl" href=""/>
<div class="nav">
    <div class="nav-wrap">
        <a href="index" class="logo">问答</a>
        <div class="search-area">
            <form action="listTopicByTopicName" method="post">
                <input name="topicName" type="text" class="search-input" placeholder="搜索你感兴趣的内容...">
                <button type="submit" class="search-button"><i class="sprite-search"></i></button>
            </form>
        </div>
        <div class="top-nav">
            <ul>
                <li><a href="index">首页</a></li>
                <li><a href="topics">话题</a></li>
                <li><a href="explore">发现</a></li>
                <li><a href="message">消息</a></li>
            </ul>
            <!-- <div class="notice"></div> -->
        </div>
        <div class="nav-profile">
            <a id="profile-link" href="profile" class="profile-link">
                <img id="profile-avatar" src="image/avatar6.jpg">
                <span id="profile-username"></span>
            </a>
            <ul class="nav-dropdown">
                <li><a href="profile" class="profile-link"><i class="sprite-nav-profile"></i>&nbsp;&nbsp;&nbsp;我的主页</a>
                </li>
                <!-- <li><a href="letter"><i class="sprite-nav-letter"></i>&nbsp;&nbsp;&nbsp;私信</a></li> -->
                <li><a href="setting"><i class="sprite-nav-setting"></i>&nbsp;&nbsp;&nbsp;设置</a></li>
                <li><a href="logout"><i class="sprite-nav-logout"></i>&nbsp;&nbsp;&nbsp;退出</a></li>
            </ul>
        </div>
        <button class="ask-question open-mask">提问</button>
    </div>
</div>
<div class="main" id="/hahu">
    <div class="content">
        <div class="question-info">
            <div class="question-tag">
                <a href="topicDetail/40">java</a>
                <a href="topicDetail/180">算法</a>
            </div>
            <div class="question-title">
                <a th:text="${q.title}" href="question/1" id="questionId" data-id="1">Spring，Django，Rails，Express这些框架技术的出现都是为了解决什么问题，现在这些框架都应用在哪些方面？</a>
            </div>
            <div class="question-content">
                <p th:text="${q.description}">问题1</p>
            </div>
            <div class="question-meta">
                <a href="#" class="question-reply"><i class="sprite-question-reply"></i><span
                        th:text="${q.answerCount}"></span>条评论</a>
                <!-- <a href="#" class="question-share"><i class="sprite-question-share"></i>分享</a> -->
                <!-- <a href="#"><span> • </span>邀请回答</a> -->
            </div>
            <div class="comment">
                <ul>
                    <li class="comment-li" id="question-comment-1" th:each="a:${answerList}">
                        <img src="image/avatar6.jpg">
                        <div class="comment-main">
                            <div class="user-name">
                                <a href="profile/5" th:text="${a.answerUser}">张三</a>

                            </div>
                            <div class="comment-content" th:utext="${a.answer}">11</div>
                            <div class="comment-meta">
                                <span th:text="${#dates.format(a.answerDate,'yyyy-MM-dd')}">2017-5-6</span>
                                <span><a href="#" class="toggle-reply">回复</a></span>
                                <span class="like-question-comment">
												<a href="" question-comment-id="1">赞</a>
											</span>
                                <span>0 赞</span>
                            </div>
                            <div class="add-comment-reply hide">
                                <form class="reply-form">
                                    <input type="hidden" name="atUserId" value="5">
                                    <input type="hidden" name="atUserName" value="张三">
                                    <input type="hidden" name="questionId" value="1">
                                    <textarea></textarea>
                                    <button type="button" class="reply-button">回复</button>
                                </form>
                            </div>
                        </div>
                    </li>


                </ul>
                <div class="add-comment">
                    <form th:action="@{/addAnswer}" method="post">
                        <input type="hidden" name="questionId" th:value="${q.id}">
                        <input type="hidden" name="answerUser" value="老王">
                        <textarea name="answer"></textarea>
                        <button id="commentQuestionButton" type="submit">评论</button>
                    </form>
                </div>
            </div>
            <div class="answer-count">
                <div class="count">15 个回答</div>
                <!-- <div class="sort">
                    <a href="#" class="sort-button">排序方式<i class="sprite-sort"></i></a>
                    <ul style="display: none;">
                        <li><a href="#">&nbsp;默认排序</a></li>
                        <li><a href="#">&nbsp;按时间排序</a></li>
                    </ul>
                </div> -->
            </div>
        </div>
        <div class="answer-list">
            <div class="answer-item" id="answer-1" th:each="a:${answerList}">
                <div class="user-info">
                    <a href="profile/3" th:text="${a.answerUser}">fanchao</a>
                    <span class="comma">，</span>
                    <span>无</span>
                    <img src="image/avatar6.jpg">
                </div>
                <div class="answer-content">
                    <p th:utext="${a.answer}">回答1</p>
                </div>
                <div class="answer-meta">
                    <a href="#" th:text="${#dates.format(a.answerDate,'yyyy-MM-dd')}">&nbsp;发布于 2017-4-30</a>
                    <a href="#"><span class="glyphicon glyphicon-leaf" th:text="${a.commentsCount}"></span>条评论</a>
                    <a href="" data-id="1" class="toCollectAnswer"><span class="glyphicon glyphicon-bookmark"></span>&nbsp;收藏</a>
                </div>
                <div class="votebar">
                    <button class="vote-up" clicked="false" answer-id="1">0
                        <i></i>
                    </button>
                </div>

                <div class="comment">
                    <ul>

                    </ul>
                    <div class="add-comment">
                        <form class="commentAnswerForm">
                            <input type="hidden" name="answerId" value="1">
                            <textarea></textarea>
                            <button class="commentAnswerButton" type="button">评论</button>
                        </form>
                    </div>
                </div>
            </div>


        </div>

        <div class="edit-area">
            <div class="user-info">
                <a href="#">fanchao</a>
                <span class="comma">，</span>
                <span>无</span>
                <img src="image/avatar6.jpg">
            </div>
            <div>
                <form th:action="@{/addAnswer}" method="post">
                    <input type="hidden" name="questionId" th:value="${q.id}">
                    <input type="hidden" name="answerUser" value="老王">
                    <textarea name="answer" id="answerContent" style="height: 200px;"></textarea>
                    <!--                    <button id="answerButton" type="submit">发布回答</button>-->
                    <div class="publish-answer">
                        <input type="checkbox" name="anonymous" class="anonymous">&nbsp;&nbsp;匿名
                        <button id="answerButton" type="submit" href="#">发布回答</button>
                    </div>
                </form>
            </div>
            <!--            <div class="publish-answer">-->
            <!--                &lt;!&ndash; <input type="checkbox" name="anonymous" class="anonymous">&nbsp;&nbsp;匿名 &ndash;&gt;-->
            <!--                &lt;!&ndash;                <button id="answerButton" href="#">发布回答</button>&ndash;&gt;-->
            <!--            </div>-->
        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-top">
            <button id="unfollowQuestionButton" class="unfollow">取消关注</button>
            <button id="followQuestionButton" class="follow">关注问题</button>
            <div class="follower-info">
                <a href="#" class="follower-count">0</a> 人关注该问题
                <div class="follower-avatar">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
        <div class="related-question">
            <h3>相关问题</h3>
            <ul>
                <li>
                    <a href="question/1">Spring，Django，Rails，Express这些框架技术的出现都是为了解决什么问题，现在这些框架都应用在哪些方面？</a>
                    <span>18个回答</span>
                </li>
            </ul>
        </div>
        <div class="question-status">
            <h3>问题状态</h3>
            <div>被浏览<span> 1 </span>次，问题创建于<span> 2017-4-30 </span></div>
        </div>
    </div>
</div>

<div class="footer">
    <span>@ 2022 虾乎</span>
    <span class="footer-right">
			<a href="#">建议反馈</a>
			<span> • </span>
			<a href="#">举报投诉</a>
			<span> • </span>
			<a href="#">联系我们</a>
			<span> • </span>
			<a href="#">加入我们</a>
		</span>
</div>

<div class="mask"></div>
<div class="upon-mask" id="ask-modal">
    <h3>
        <span>提问</span>
        <span class="close-mask">×</span>
    </h3>
    <form id="askForm">
        <input id="questionTitle" type="text" name="title" placeholder="写下你的问题">
        <div>问题（可选）：</div>
        <textarea name="content" id="questionContent" style="height: 95px;"></textarea>
        <div>添加话题（以逗号分割多个话题）：</div>
        <input id="topicNameString" type="text" name="topics">
        <button id="askButton" type="button">发布</button>
    </form>
</div>

<style>
    #collectionAnswerModal {
        width: 420px;
        height: 250px;
    }

    #collectionAnswerModal button {
        position: relative;
        right: 28px;
    }

    #collectionAnswerModal ul.collection-list {
        width: 365px;
        padding: 15px 0;
        margin: 0 auto;
    }


    #collectionAnswerModal ul.collection-list li {
        width: 340px;
        height: 42px;
        padding: 8px 12px;
        border: 1px solid #ddd;
        margin-bottom: 5px;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
    }

    #collectionAnswerModal ul.collection-list li:hover {
        background-color: #F5F5F5;
    }

    #collectionAnswerModal h5 {
        font-size: 13px;
        line-height: 1.7;
    }

    #collectionAnswerModal ul li span {
        font-size: 12px;
        line-height: 1.7;
        color: #999;
    }

    .collect-right {
        width: 24px;
        height: 24px;
        background-image: url("../image/collectRight.jpg");
        position: absolute;
        top: 18px;
        right: 12px;
    }
</style>


<div class="upon-mask" id="collectionAnswerModal">
    <h3>
        <span>添加到收藏夹</span>
        <span class="close-mask">×</span>
    </h3>
    <ul id="collectionList" class="collection-list">
        <li>
            <h5 data-id="2">收藏夹1</h5>
            <span>5 条内容</span>
            <span> • </span>
            <span>5 人关注</span>
            <i></i>
        </li>
        <li>
            <h5 data-id="3">收藏夹2</h5>
            <span>5 条内容</span>
            <span> • </span>
            <span>5 人关注</span>
            <i></i>
        </li>
    </ul>
</div>


<script type="text/javascript" src="js/wangEditor.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script type="text/javascript" src="js/mask.js"></script>
<script type="text/javascript" src="js/maskCollectAnswer.js"></script>
<script type="text/javascript" src="js/questionDetail.js"></script>


</body>
</html>